<template>
  <div class="app-main-container tabpdding">
    <QueryForm
      v-model="filters"
      :show-qk="showQk"
      :query-form-config="queryFormConfig"
      @handleQuery="getList"
    />
    <div v-if="tjList && tjList.length > 0" class="total_wrap">
      <div class="first item">
        <div class="key">{{ translate("shanxuan") }}</div>
        <div class="value">{{ translate("heji") }}</div>
      </div>
      <div class="item_list">
        <div v-for="(item, i) in tjList" :key="i" class="item">
          <div class="key">{{ item.name }}</div>
          <div class="value">
            <!-- <span>{{translate("renminbi")}}</span> -->
            <span class="price">{{ item.num }}</span>
          </div>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeTab" @tab-click="getList">
      <el-tab-pane :label="translate('rlfxtb')" name="1"
        ><Echarts
          v-if="activeTab === '1'"
          ref="charts"
          :filters="filters"
          :list="listb"
      /></el-tab-pane>
      <el-tab-pane :label="translate('rlfx')" name="0"
        ><Traffic
          v-if="activeTab === '0'"
          ref="traffic"
          :filters="filters"
          :list="list"
      /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Traffic from './list.vue'
import Echarts from './echarts.vue'
import { queryFormConfig } from './config'
import { parseTime } from '@/utils'
import { venueList, crowdedAllCount } from '@/api'
export default {
  name: 'Devicj',
  components: {
    Traffic,
    Echarts
  },
  data() {
    return {
      queryFormConfig,
      activeTab: '1',
      showQk: false,
      meta: [],
      list: [],
      listb: [],
      chartsList: [],
      filters: {
        type: '1',
        startTime: parseTime(new Date()).slice(0, 10)
      },
      tjList: [{
        name: this.translate('allEnterTime'),
        num: 0
      }, {
        name: this.translate('allOutTime'),
        num: 0
      }]
    }
  },
  created() {
    const meta = this.$route.meta.buttons || []
    this.meta = meta
    this.getVenueList()
  },
  methods: {
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    getList() {
      const { filters } = this
      crowdedAllCount({ param: { ...filters } }).then(res => {
        if (res.errorCode === '000000') {
          this.list = res.recordList || []
          const tjList = [...this.tjList]
          const arr = [...res.recordList]
          let j = 0
          let c = 0
          arr.forEach(s => {
            j = j + s.totlEntries
            c = c + s.totlOut
          })
          tjList[0].num = j
          tjList[1].num = c
          this.tjList = tjList
          this.listb = res.recordList.reverse()
          if (this.activeTab === '1') {
            this.$nextTick(() => {
              this.$refs.charts.getChartData()
            })
          }
        }
      }).catch(() => { })
    },
    // 获取场馆列表
    getVenueList() {
      venueList({
        param: { flag: '0' }
      })
        .then((res) => {
          if (res.errorCode !== '000000') return
          const arr = res.recordList
          this.queryFormConfig.formItems[0].options = arr
          this.$set(this.filters, 'venueId', arr[0].id)
          this.getList()
        })
    }
  }

}
</script>

